<script setup>
	import {
		ArrowDown,
	} from '@element-plus/icons-vue'
	import {
		ref,
		getCurrentInstance,
		reactive
	} from 'vue';
	// const {proxy} = getCurrentInstance();
	let isLogin = ref(false)
	let notLogin = ref(true)
	let userdata = reactive({})
	// 默认头像
	let tx_url = ref("https://img1.baidu.com/it/u=1106128825,2416237361&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500")
	// 是否登录
	const {
		proxy
	} = getCurrentInstance(); //正常使用:语法糖环境默认为setup钩子
	async function IsLogin() {
		let res = await proxy.$axios.get('islogin', {
			params: {
				id: 99
			}
		})
		userdata.value = res
		// console.log(res,res.data.code);
		// console.log(userdata.value.data.userInfo[0].usertx,89);
		// 登录了
		if (res.data.code == 2002) {
			isLogin.value = true
			notLogin.value = false
			// 头像网址
			if (userdata.value.data.userInfo[0].usertx != 0) {
				tx_url.value = userdata.value.data.userInfo[0].usertx
			}

		}
		// 没登录
		else if (res.data.code == 4004) {
			isLogin.value = false
			notLogin.value = true
			console.log(22);

		}
	}
	IsLogin()

	// 退出登录
	async function quit() {
		let re1 = await proxy.$axios.get('nocookie', {
			params: {
				id: 99
			}
		})
		console.log(re1);
	}
</script>
<template>
	<el-row class="cardaohang">
		<!-- 下拉菜单 -->
		<el-col :span="3">
			<el-dropdown size="large">
				<span class="el-dropdown-link">
					<router-link to="/Carshouye"> 租车选择导航</router-link>
					<el-icon class="el-icon--right">
						<arrow-down />
					</el-icon>
				</span>
				<template #dropdown>
					<el-dropdown-menu class="carMenu">
						<el-dropdown-item class="carItem">
							<router-link :to="{path:'/Carshouye',query:{id:1}}">轿车</router-link>
						</el-dropdown-item>
						<el-dropdown-item class="carItem">
							<router-link :to="{path:'/Carshouye',query:{id:2}}">商务车</router-link>
						</el-dropdown-item>
						<el-dropdown-item class="carItem">
							<router-link :to="{path:'/Carshouye',query:{id:3}}">越野车</router-link>
						</el-dropdown-item>
						<el-dropdown-item class="carItem">
							<router-link :to="{path:'/Carshouye',query:{id:4}}">大巴</router-link>
						</el-dropdown-item>
						<el-dropdown-item class="carItem">
							<router-link :to="{path:'/Carshouye',query:{id:6}}">豪车</router-link>
						</el-dropdown-item>
						<el-dropdown-item class="carItem">
							<router-link :to="{path:'/Carshouye',query:{id:7}}">婚车</router-link>
						</el-dropdown-item>
						<el-dropdown-item class="carItem">
							<router-link :to="{path:'/Carshouye',query:{id:8}}">房车</router-link>
						</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</el-col>
		<el-col :span="1">
			<div class="grid-content ep-bg-purple">
				<router-link to="/">首页</router-link>
			</div>
		</el-col>
		<el-col :span="2">
			<div class="grid-content ep-bg-purple-light ">
				<router-link to="/yj/enterprise">企业租车</router-link>
			</div>
		</el-col>
		<el-col :span="2">
			<div class="grid-content ep-bg-purple">
				<router-link to="/yj/personal">个人租车</router-link>
			</div>
		</el-col>
		<el-col :span="2">
			<div class="grid-content ep-bg-purple-light">
				<router-link to="/yj/wedding">婚庆租车</router-link>
			</div>
		</el-col>
		<el-col :span="2">
			<div class="grid-content ep-bg-purple">
				<router-link to="/yj/aircraft">接机送机</router-link>
			</div>
		</el-col>
		<el-col :span="2">
			<div class="grid-content ep-bg-purple-light">
				<router-link to="/profile">公司介绍</router-link>
			</div>
		</el-col>
		<el-col :span="2">
			<div class="grid-content ep-bg-purple">
				<router-link to="/yj/news">新闻动态</router-link>
			</div>
		</el-col>
		<el-col :span="2">
			<div class="grid-content ep-bg-purple-light">
				<router-link to="/problem">常见问题</router-link>
			</div>
		</el-col>
		<el-col :span="2">
			<div class="grid-content ep-bg-purple-light">
				<router-link to="/service">服务说明</router-link>
			</div>
		</el-col>
		<el-col :span="2">
			<div class="grid-content ep-bg-purple">
				<el-dropdown size="large">
					<span class="el-dropdown-link">
						发布<el-icon class="el-icon--right">
							<arrow-down />
						</el-icon>
					</span>
					<template #dropdown>
						<el-dropdown-menu class="carMenu">
							<el-dropdown-item class="carItem">
								<router-link to="/releaseCar">发布车辆</router-link>
							</el-dropdown-item>
							<el-dropdown-item class="carItem">
								<router-link to="/newsRelease">发布新闻</router-link>
							</el-dropdown-item>


						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
		</el-col>


		<el-col :span="2">
			<div class="grid-content ep-bg-purple-light">
				<div class="touxiang">
					<router-link to="/center"><img v-if="isLogin" :src="tx_url" title="点击进入个人中心" /></router-link>
					<div class="tuichu" @click="quit">
						<router-link to="/login">退出</router-link>
					</div>
				</div>
				<div v-if="notLogin">
					<router-link to="/login">登录</router-link>
				</div>
			</div>
		</el-col>
	</el-row>
</template>
<style lang="scss" scoped>
	// 导航栏的整个盒子
	.el-row {
		margin: auto;
		// width: 100%;
		// position: fixed;
		height: 40px;
		background-color: #162D46;
		color: white;
	}

	li {
		display: none;
		font-size: 14px;
		color: rgb(184, 14, 14);
		z-index: 99999;
	}

	a {
		color: white;
		text-decoration: none;
	}

	//  下拉列表
	.example-showcase .el-dropdown-link {
		cursor: pointer;
		color: var(--el-color-primary);
		display: flex;
		align-items: center;
	}

	.cardaohang {
		text-align: center;
	}

	.el-dropdown-link {
		line-height: 40px;
		font-size: 16px;
		color: white;

	}

	.carMenu {
		width: 130px;

		a {
			display: inline-block;
			color: rgb(96, 98, 102);
			width: 100%;
			text-align: center;
		}

		a:hover {
			color: rgb(219, 37, 52);
		}

	}

	// 每个标题的样式
	.grid-content {
		text-align: center;
		font-size: 16px;
		line-height: 40px;
		cursor: pointer;
	}

	// 头像
	.touxiang {
		display: flex;

		img {
			width: 40px;
			height: 40px;
			border-radius: 50%;
		}

		.tuichu {
			display: inline-block;
			display: none;
			// height: 40px;
			// line-height: 40px;
			margin-left: 10px;
		}

	}

	.touxiang:hover {
		.tuichu {
			display: block;
		}
	}

	a:hover {
		color: rgb(255, 199, 93);
	}

	.carItem {
		color: aqua;
	}
</style>
